<!--
 * @Author: your name
 * @Date: 2022-01-19 12:27:35
 * @LastEditTime: 2022-01-19 23:44:34
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \json-serveg:\桌面2\VueStudy\vue-test4\vue-eqidemic\src\components\VueEcharts\WorldMap.vue
-->
<template>
  <div>
      <div class="title">世界疫情地图</div>
      <div  id="main" style="width: 100%; height: 7rem">
        <div v-if="arr.length <= 0">今日接口次数已达超额,请择日查看</div>
      </div>
  </div>
</template>

<script>
import api from '../../api/index'

export default {
    name:'WorldMap',
    data() {
      return {
        arr:[]
      }
    },
    mounted() {
        // this.$myChart.worldMap('main',[])
        api.worldCovData().then((res) => {
            console.log(res.data);
            //获取全国信息
            let world = res.data.retdata //全国信息原数据
             let arr = [] //累计
            // let newArr= [] //现存
            for (let i = 0; i < world.length; i++) {
                const obj = {}
                // const newObj = {}
                obj.name = world[i].xArea  //省名
                obj.value = world[i].confirm; //累计确诊人数   curConfirm现在确诊人数
                // newObj.name = citys[i].xArea  //省名
                // newObj.value = citys[i].curConfirm;
                arr.push(obj)
                // newArr.push(newObj)
            }
            // this.arr = arr;
            // console.log("城市的数据", arr);
            // this.$nextTick(() => {
                // this.$myChart.chinaMap('main',arr) //读取不到节点,因为是异步的标签,显示为null
                this.$myChart.worldMap('main',arr)
                
            // })
            

        })

    },
}
</script>

<style>
.title {
  margin: 0.2rem;
  padding-top: 0.2rem;
  border-top: 1px solid #eee;
}
.title::before {
  content: "";
  border-left: 0.1rem solid rgb(9, 60, 202);
  font-size: 0.26rem;
  margin-right: 0.1rem;
}
#main {
  background: #f5f5f5;
}
</style>
